<template>
    <div style="margin: 30px">
      <div style="float: left;margin-right: 100px;margin-left: 50px;" id="logo">
        <img src="@/assets/校徽.jpg" style="width: 40px"/>
      </div>
      <div style="padding-top: 5px;float: left" id="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
              v-for="(item,index) in breadList"
              :key="index"
          ><i :class="item.meta.icon"></i>
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="float: right;padding-bottom: 10px">
        <el-button style="margin-left: 16px" @click="drawer = true" id="userButton">
          <i class="el-icon-user-solid"></i>
          <span>学生用户</span>
        </el-button>
        <el-drawer v-model="drawer" direction="rtl" size="15%">
          <template #title>
            <h4>学生：{{ username }}</h4>
          </template>
          <div style="display: flex;justify-content: center;align-content: center;margin-bottom: 20px">
            <el-button size="small" class="longButton" @click="changePwdDialog=true"
            >修改密码
            </el-button>
            <el-dialog v-model="changePwdDialog" @close="closeDialog()" width="30%">
              <el-form
                  :model="changePwdForm"
                  :rules="rules"
                  label-position="right"
                  label-width="100px"
                  style="max-width: 460px"
                  v-loading=false
                  ref="addRoleForm"
              >
                <el-form-item label="原密码：" prop="oldPwd">
                  <el-input
                      type="password"
                      prefix-icon="el-icon-lock"
                      v-model="changePwdForm.oldPwd"
                      auto-complete="new-password"
                      :readonly="readonlyFlag"
                      @focus="handlerIptClick"
                      clearable
                      placeholder="请输入原密码"
                      show-password
                  ></el-input>
                </el-form-item>
                <el-form-item label="新密码：" prop="newPwd">
                  <el-input
                      type="password"
                      prefix-icon="el-icon-lock"
                      v-model="changePwdForm.newPwd"
                      auto-complete="new-password"
                      :readonly="readonlyFlag"
                      @focus="handlerIptClick"
                      clearable
                      placeholder="请输入新密码"
                      show-password
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="confirmPwd">
                  <el-input
                      type="password"
                      prefix-icon="el-icon-lock"
                      v-model="changePwdForm.confirmPwd"
                      auto-complete="new-password"
                      :readonly="readonlyFlag"
                      @focus="handlerIptClick"
                      clearable
                      placeholder="请确认新密码"
                      show-password
                  ></el-input>
                </el-form-item>
                <div style="padding: 0;justify-content: center;align-items: center;">
                  <el-button
                      type="primary"
                      class="loginButton"
                      @click="changePwd()"
                  >确认修改
                  </el-button>
                </div>
              </el-form>
            </el-dialog>
          </div>
          <div style="display: flex;justify-content: center;align-content: center;margin-bottom: 20px">
            <el-button size="small" class="logOffButton" @click="logOffDialog=true"
            >注销账号
            </el-button>
            <el-dialog
                title="注销验证"
                v-model="logOffDialog"
                @close="closeLogOffDialog()"
                width="30%"
            >
              <el-alert
                  title="注意：注销后该用户数据将删除且无法恢复"
                  type="warning"
                  :closable="false"
                  show-icon>
              </el-alert>
              <el-form
                  :model="logOffForm"
                  :rules="rulesLogoff"
                  label-position="right"
                  label-width="100px"
                  style="max-width: 460px"
                  v-loading=false
                  ref="logOffFormRef"
              >
                <el-form-item label="用户密码：" prop="pwd">
                  <el-input
                      type="password"
                      prefix-icon="el-icon-lock"
                      v-model="logOffForm.pwd"
                      clearable
                      placeholder="请输入密码"
                      show-password
                  ></el-input>
                </el-form-item>
                <div style="padding: 0;justify-content: center;align-items: center;">
                  <el-button
                      type="primary"
                      class="loginButton"
                      @click="logoff()"
                  >确认注销
                  </el-button>
                </div>
              </el-form>
            </el-dialog>
          </div>
          <div style="display: flex;justify-content: center;align-content: center">
            <el-button size="small" class="deleteButton" @click="confirmClick"
            >退出登录
            </el-button>
          </div>
        </el-drawer>
      </div>
    </div>
  
    <hr class="style-one">
    <div style="float: left" id="navigation">
      <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" router>
        <el-menu-item>
          <!--        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
          <div @click="collapse()">
            <i :class="collapseBtnClass" id="hamburger"></i>
          </div>
          <!--          <el-radio-button :label="false">展开</el-radio-button>-->
          <!--          <el-radio-button :label="true">收起</el-radio-button>-->
          <!--        </el-radio-group>-->
        </el-menu-item>
        <el-menu-item index="/Homestudent">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template #title>
            <i class="el-icon-s-operation"></i>
            <span>课程中心</span>
          </template>
          <el-menu-item index="/studentCourseCenter/courseSelection">选课系统</el-menu-item>
          <el-menu-item index="/studentCourseCenter/courseSelectionResult">选课管理</el-menu-item>
          <el-menu-item index="/studentCourseCenter/studentCourseTable">学期课表</el-menu-item>
          <el-menu-item index="/studentCourseCenter/scoreStudent">成绩信息</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template #title>
            <i class="el-icon-user"></i>
            <span>学生个人中心</span>
          </template>
          <el-menu-item index="/StudentCenter/studentAssessment">学生互评</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </template>
  <style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  </style>
  
  <script>
  import router from "@/router";
  
  export default {
    name: "NaviStudent",
    data() {
      return {
        logOffDialog: false,
        logOffForm: {
          pwd: ''
        },
        rulesLogoff: {
          pwd: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 6, max: 40, message: '长度为6-40个字符', trigger: 'blur'}
          ]
        },
        changePwdDialog: false,
        readonlyFlag: true,
        changePwdForm: {
          oldPwd: '',
          newPwd: '',
          confirmPwd: ''
        },
        rules: {
          oldPwd: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 6, max: 40, message: '长度为6-40个字符', trigger: 'blur'}
          ],
          newPwd: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 6, max: 40, message: '长度为6-40个字符', trigger: 'blur'}
          ],
          confirmPwd: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 6, max: 40, message: '长度为6-40个字符', trigger: 'blur'}
          ],
        },
        username: '',
        drawer: false,
        breadList: [],
        isCollapse: false,
        collapseBtnClass: 'el-icon-s-fold'
      };
    },
    watch: {
      $route() {
        this.getBreadcrumb(); //监听路由变化
      }
    },
    methods: {
      handlerIptClick() {
        this.readonlyFlag = false;
      },
      collapse() {  // 点击收缩按钮触发
        this.isCollapse = !this.isCollapse
        if (this.isCollapse) {  // 收缩
          this.collapseBtnClass = 'el-icon-s-unfold'
        } else {   // 展开
          this.collapseBtnClass = 'el-icon-s-fold'
        }
      },
  
      isHome(route) {
        return route.name === "HomeStudent";
      },
      getBreadcrumb() {
        let matched = this.$route.matched;
        //如果不是首页
        if (!this.isHome(matched[0])) {
          //多路径拼接
          matched = [{path: "/HomeStudent", meta: {title: "主页", icon: 'el-icon-s-home'}}].concat(matched);
          // console.log(matched);
        }
        this.breadList = matched;
      },
      logout() {
        this.$store.commit("logout");
        router.push("/login");
      },
      confirmClick() {
        this.$confirm('确定退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => this.logout()).then(() => {
          this.$message({
            type: 'success',
            message: '退出登录成功!'
          });
        });
      },
      closeDialog() {
        this.changePwdDialog = false; //关闭对话框
        this.$refs.addRoleForm.resetFields();        //重置表单
      },
      changePwd() {
        if (this.changePwdForm.oldPwd === this.changePwdForm.newPwd) {
          this.$message({
            message: '新密码不能与旧密码相同',
            type: 'error'
          })
          return
        } else if (this.changePwdForm.newPwd !== this.changePwdForm.confirmPwd) {
          this.$message({
            message: '两次输入密码不一致',
            type: 'error'
          })
          return
        }
        const theUsername = this.username;
        const theOldPwd = this.changePwdForm.oldPwd;
        const theNewPwd = this.changePwdForm.newPwd;
        if (theUsername && theOldPwd) {
          this.$store
              .dispatch("changePwd", {
                username: theUsername,
                oldPwd: theOldPwd,
                newPwd: theNewPwd
              }).then(() => {
            this.$message({
              message: "密码修改成功",
              type: "success",
            });
            this.closeDialog()
          })
              .catch(() => {
                this.$message({
                  message: "原密码错误",
                  type: "error",
                });
              });
        }
  
      },
      closeLogOffDialog() {
        this.logOffDialog = false;
        this.$refs.logOffFormRef.resetFields();
      },
      logoff() {
        const username = this.$store.state.username;
        const password = this.logOffForm.pwd;
        if (username && password) {
          this.$store
              .dispatch('logoff', {
                username: username,
                password: password,
                role: "student"
              }).then(() => {
            this.$message({
              message: '用户已注销',
              type: 'success'
            })
          }).catch(() => {
            this.$message({
              message: '密码错误',
              type: 'error'
            })
          })
        }
      }
    },
    created() {
      this.username = this.$store.state.username
      this.getBreadcrumb();
    }
  }
  </script>
  
  <style>
  hr.style-one {
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(30, 144, 255), rgba(0, 0, 0, 0));
  }
  
  </style>